<template>
  <div>
      <el-select v-model="value0" placeholder="请选择本品" >
        <el-option
        v-for="item in options"
        :key="item.id"
        :label="item.name"
        :value="item.id">
        </el-option>
      </el-select>
      <el-select v-model="value1" multiple placeholder="请选择竞品" :multiple-limit="4" size="50">
        <el-option
        v-for="item in options"
        :key="item.id"
        :label="item.name"
        :value="item.id">
        </el-option>
      </el-select>
      <el-button type="primary" icon="el-icon-search" @click="search" :loading='action'>搜索</el-button>
      <v-line v-for="item in line" :chartsId='item.chartid' :keyName='item.key' :key="item.itemId" :data="item.data" :brandName="item.brandName" :value0="value0" :value1="value1"></v-line>
  </div>
</template>
<style lang="scss" scoped>
.el-button{
    background-color: #2bba8e;
    border-color: #2bba8e;
}
</style>

<script>
import Vue from 'vue' 
import qs from 'qs';
import itemSale from '@/components/views/chart/sale'
import minLin from '@/components/views/chart/mix-lin'
import salesMap from '@/components/views/chart/salesMap'
import line from '@/components/views/chart/line'
export default {
  name: 'sales',
  data(){
        return {
            action: false,
            options: [],
            value0: [],
            value1: [],
            line: [{
                itemId: 1,
                chartid: 'myChart0',
                key: '品牌市场份额趋势变化图',
                val: 1,
                data: [],
                brandName: []
            }],
            
        }
  },
  components: {
      'v-itemSale': itemSale,
      'v-minLin': minLin,
      'v-salesMap': salesMap,
      'v-line': line
  },
  created(){
      let self = this;
      this.$http.get('gz/getBrand')
      .then(function(res){
          let data = res.data;
          self.options = data.BrandList;
      });
      this.$http.get('gz/getBrandSalesQuotientTop')
      .then(function(res){
          let data = res.data;
          self.line[0].data = data;
      });
  },
  methods: {
      open4() {
        this.$message({
          showClose: true,
          message: '请选择本品以及竞品',
          type: 'error',
          duration: '1500'
        });
      },
      search(){
          let self = this;
          this.action = true;//loading状态
          //校验输入
          if(this.value0.length == 0 || this.value1.length == 0){
            this.open4();
            this.action = false;
            return;
          }
          //生成本品加竞品的id
          let arr = [];
          arr = arr.concat(this.value0, this.value1);
          //找到arr对应的车名
          let brandName = [];
          for(let i = 0; i < arr.length; i++){
              let obj = {};
              obj = this.options.find((item)=>{
                  return item.id === arr[i];
              });
              brandName.push(obj.name)
              this.line[0].brandName = brandName;
          }
          //给后台传id
            $.ajax({
                url: 'gz/getBrandSalesQuotient',
                data: {
                brandIdArray: arr
                },
                traditional: true,
                success: function(data){
                    console.log(data);
                    self.line[0].data = data;
                    self.action = false;
                },
                error: function(){
                    self.action = false;
                }
            })
      }
  }
}
</script>
